﻿@page "/content/figure"

<Pager Title="Figure" Description="Documentation and examples for displaying related images and text with the figure component">
	<Demo Title="Example">
		<Description>
			Use <code>Figure</code> component instead of <code>&lt;figure></code> element, 
			<code>FigureCaption</code> instead of <code>&lt;figcaption></code> element, 
			and use <code>FigureImage</code> instead of <code>&lt;img></code> element or <code>Image</code> component.
		</Description>
		<Run>
			<Figure>
				<FigureImage Src="/img/demo-bg-img.jfif" width="50%"/>
				<FigureCaption>A caption for the above image</FigureCaption>
			</Figure>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Figure>
	<FigureImage Src=""...""/>
	<FigureCaption>A caption for the above image</FigureCaption>
</Figure>
```
			")
		</Code>
	</Demo>
	<Demo>
		<Description>
		</Description>
		<Run>
			<Figure>
				<FigureImage Src="/img/demo-bg-img.jfif" width="50%"/>
				<FigureCaption CssClass="Css.Text(Text.End)">A caption for the above image</FigureCaption>
			</Figure>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Figure>
	<FigureImage Src=""...""/>
	<FigureCaption CssClass=""Css.Text(Text.End)"">A caption for the above image</FigureCaption>
</Figure>
```
			")
		</Code>
	</Demo>
</Pager>